<template>
  <div class="env-manage">
    
    <side-layout title="环境"
      v-bind:data-list="envData"
      v-bind:selected-data="envSelected"
      v-bind:get-api="getEnv"
      add-api="addEnv"
      delete-api="deleteEnv"
      rename-api="renameEnv"
      v-bind:on-change="changeEnv"
      v-on:on-update="updateEnv">
      
      <div class="env-manage-menu">
        <Menu mode="horizontal" theme="light" active-name="1" v-on:on-select="selectMenuHandler" v-bind:style="{ height: '60px' }">
          <MenuItem name="1">资源选择</MenuItem>
          <MenuItem name="2">属性设置</MenuItem>
          <MenuItem name="3">互动物品</MenuItem>
        </Menu>
      </div>
      
      <div class="env-manage-main" v-bind:style="{ position: 'absolute', top: '60px', bottom: '0', left: '0', right: '0' }" v-if="envDetailData">
        
        <!-- 资源选择 -->
        <div class="env-manage-part" v-if="menuSelected === '1'">
          <div class="env-manage-resource">
            <div class="env-manage-resource-top">
              <Button class="cm-margin-right-10" type="primary" v-on:click="selectAutotilesHandler">选择AutoTile</Button>
              <span class="cm-margin-right-5">选择图集</span>
              <Select placeholder="选择图集" style="width: 200px" v-on:on-select="selectTilesetHandler">
                <Option v-for="(tileset, index) in tilesetsData" v-bind:value="tileset" v-bind:key="index">{{ tileset }}</Option>
              </Select>
            </div>
            <div class="env-manage-resource-content">
              <env-show
                v-bind:env-data="envDetailData"></env-show>              
            </div>
          </div>

        </div>
        
        <!-- 属性设置 -->
        <div class="env-manage-part" v-if="menuSelected === '2'">
          <div class="env-manage-prop">
            <div class="env-manage-prop-left">
              <env-show min-image-size="48"
                v-bind:env-data="envDetailData">
                <template v-slot:props="data">
                  <prop-edit v-bind:obj="envDetailData.objects[data.objectsIndex]"
                    v-bind:prop-editing="propSelection"
                    v-on:on-change="propChangeHandler(data.objectsIndex, arguments)"></prop-edit>
                </template>
              </env-show>  
            </div>
            <div class="env-manage-prop-right">
              <Radio-group v-model="propSelection" vertical>
                <Radio label="pass">可通行性</Radio>
                <Radio label="passIn">入向通行</Radio>
                <Radio label="passOut">出向通行</Radio>
                <Radio label="vision">视野连通性</Radio>
                <Radio label="visionArround">视野连通性(四方向)</Radio>
                <Radio label="layer">层级</Radio>
              </Radio-group>
              <div class="cm-margin-top-10">
                层级说明</br>
                数字越高，显示优先级越高</br>
                角色所在的层级为15，大于15代表该景物固定遮盖角色</br>
              </div>
              <div class="cm-margin-top-10">如果离开页面，未保存的设置不会保留，请注意及时保存</div>
              <Alert class="cm-margin-top-10" v-if="!isSave" type="warning" show-icon>有未保存的变更</Alert>
              <Button class="cm-margin-top-10" type="primary" v-on:click="saveEnv">保存设置</Button>
            </div>
          </div>
        </div>
        
        
        <div class="env-manage-part" v-if="menuSelected === '3'">3</div>
        
        <Spin fix v-if="isEnvLoading"></Spin>
        
      </div>
            
    </side-layout>
    
    <Modal
      v-model="addAutotileModal"
      title="添加Autotile">
      <div class="env-add-autotile">
        <tile-show
          v-for="(autotile, index) in autotilesData"
          v-bind:style="{ minHeight: '64px', minWidth: '64px' }"
          v-bind:key="index"
          v-bind:index="index"
          v-bind:selected-style="autotileSelectedStyle(autotile.autotile)"
          v-bind:is-cover-enabled="true"
          v-bind:src="autotile.src"
          v-bind:see-detail="autotile.src"
          v-bind:onSelect="selectAutotile">
        </tile-show>  
      </div>
    </Modal>
    
  </div>
</template>

<script src="./envManage.js"></script>

<style lang="stylus">
@import './envManage.styl'
</style>
